<template>
  <div>
    <div class="bjtk xzkh_tk">
      <div class="bjtk_list">
        <!-- <div class="head">
          <h2></h2>
          <a-button class="editable-add-btn" @click="close">
            <a-icon type="close" />
          </a-button>
        </div> -->
        <div class="close" @click="close">
          <a-icon type="close" />
        </div>
        <div class="ant-tabs-bar">
          <div class="bjd_tit">
            <span class="cz_title" >新增客户</span>
            <span class="cz_title_border"></span>
          </div>
        </div>
        <div class="list">
           
            <span class="inp_tit">
                 <span style="color:red;display:inline-block;">*</span>客户名称：</span>
            <a-input
              class="gjxq_area"
              placeholder="请输入客户名称"
              v-model="dwmc"
              allow-clear
              @change="onXzdwmcChange"
            />
          </div>
          <div class="list">
            <span class="inp_tit">
              <span style="color:red;display:inline-block;">*</span>联系电话：
            </span>
            <a-input
              class="gjxq_area"
              placeholder="请输入联系电话"
              v-model="xzkh_lxdh"
              allow-clear
              @change="onXzlxdhChange"
            />
          </div>
          <div class="list">
            <span class="inp_tit">
          任务人：</span>
            <a-select
              v-model="rwr_val"
              class="gjxq_area"
              @change="handleRwrChange"
              placeholder="input search text"
            >
              <a-select-option :value="r" v-for="(r,i1) in rwr" :key="i1">{{r}}</a-select-option>
            </a-select>
          </div>
          <div class="list">
            <span class="inp_tit">销售内勤：</span>
            <a-select
              class="gjxq_area"
              v-model="xsnq_val"
              @change="handleXsnqChange"
              placeholder="input search text"
            >
              <a-select-option :value="x" v-for="(x,i2) in xsnq" :key="i2">{{x}}</a-select-option>
            </a-select>
          </div>
          <div class="list">
            <span class="inp_tit">
          地区：</span>
            <!-- <a-select v-model="dqfl_val" style="width: 300px" @change="handleDqflChange"  placeholder="input search text" >
                            <a-select-option :value="d" v-for="(d,i) in dqfl" :key="i" >
                                {{d}}
                            </a-select-option>
            </a-select>-->
            <a-auto-complete
              v-model="dqfl_val"
              :data-source="dqfl"
              allowClear
              class="gjxq_area"
              @search="onDqflSearch"
              @select="handleDqflChange"
              placeholder="请输入地区名称"
            ></a-auto-complete>
          </div>
          <div class="list">
            <span class="inp_tit">
          行业：</span>
            <a-select
              v-model="hyfl_val"
              @change="handleHyChange"
              placeholder="input search text"
              class="gjxq_area"
            >
              <a-select-option :value="h" v-for="(h,i3) in hyfl" :key="i3">{{h}}</a-select-option>
            </a-select>
          </div>
          <div class="list">
            <span class="inp_tit">
          地址：</span>
            <a-input
              v-model="khdz"
              @change="onKhdzChange"
              placeholder="请输入地址"
              allowClear
              class="gjxq_area"
            />
          </div>
          <div class="list"></div>
          <!-- <div class="list">
                        <span class="inp_tit">
          邮件：</span>
                       <a-input  style="width:300px;"
              v-model="khemail" @change="onKhemailChange" placeholder="请输入邮箱" allowClear />
                    </div>
                    <div class="list">
                        <span class="inp_tit">
          传真：</span>
                       <a-input  style="width:300px;"
              v-model="khchuanzhen" @change="onKhchuanzhenChange" placeholder="请输入邮箱" allowClear />
                    </div>
                    <div class="list">
                        <span class="inp_tit">
          邮编：</span>
                       <a-input  style="width:300px;"
              v-model="khyoubian" @change="onKhyoubianChange" placeholder="请输入邮箱" allowClear />
                    </div>
                    <div class="list">
                        <span class="inp_tit">
          备注：</span>
                       <a-input  style="width:300px;"
              v-model="khremark" @change="onKhremarkChange" placeholder="请输入邮箱" allowClear />
                    </div>
                    <div class="list">
                        <span class="inp_tit">
          企业简介：</span>
                       <a-input  style="width:300px;"
              v-model="khjianjie" @change="onKhjianjieChange" placeholder="请输入邮箱" allowClear />
          </div>-->
          <div class="head">
            <h3>联系人</h3>
          </div>
          <div class="list">
            
            <span class="inp_tit">
                <span style="color:red;width:5px;display:inline-block;">*</span>
          姓名：</span>
            <a-input
              class="gjxq_area"
              placeholder="请输入姓名"
              v-model="xzlxr_xm"
              allow-clear
              @change="onXzxmChange"
            />
          </div>
          <div class="list">
            
            <span class="inp_tit">
                <span style="color:red;width:5px;display:inline-block;">*</span>
          手机：</span>
            <a-input
              class="gjxq_area"
              placeholder="请输入手机"
              v-model="xzlxr_phone"
              allow-clear
              @change="onXzphoneChange"
            />
          </div>
          <div class="list">
           
            <span class="inp_tit">
                 <!-- <span style="color:red;width:5px;display:inline-block;">*</span> -->
          电话：</span>
            <a-input
              class="gjxq_area"
              placeholder="请输入电话"
              v-model="lxrlxdh"
              allow-clear
              @change="onlxrlxdhChange"
            />
          </div>
          <div class="list"></div>
          <div class="list_btn">
            <a-button type="primary" class="button" @click="Quxiao()">取消</a-button>
            <a-button type="primary" style="width: 130px" @click="Savexzkhzlxg()">保存</a-button>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
import qs from "qs";
import moment from "moment";
export default {
  data() {
    return {
      moment,
      // 跳转携带参数信息
      xsdinfo: "",
      // 销售单号
      xsdh: "",
      // 单位名称
      dwmc: "",
      // 公司编码
      gsbm: "",
      // 授权id
      sqdwid: "",
      //数据库名称
      database: "ERP2_BEARING",
      // ip地址
      ip: "122.112.240.180",
      // 客户联系电话
      xzkh_lxdh: "",
      // 任务人数组
      rwr: [],
      // 任务人选项值
      rwr_val: "",
      // 销售内勤数组
      xsnq: [],
      // 销售内勤选项值
      xsnq_val: "",
      // 地区数组
      dqfl: [],
      // 地区选项值
      dqfl_val: "",
      // 行业数组
      hyfl: [],
      // 行业选项值
      hyfl_val: "",
      // 地址值
      khdz: "",
      // 客户电话
      xzkh_lxdh: "",
      // 新增姓名
      xzlxr_xm: "",
      // 手机号
      xzlxr_phone: "",
      // 电话
      lxrlxdh: "",
      // // 邮件值
      // khemail:"",
      // // 传真值
      // khchuanzhen:"",
      // // 邮编
      // khyoubian:"",
      // // 备注
      // khremark:'',
      // // 企业简介
      // khjianjie:'',
      // 当前客户的id
      ID_NUM: ""
    };
  },

  methods: {
    //关闭弹出框
    close() {
      this.$store.state.shdz = false;
    },
    // 修改电话触发
    onXzlxdhChange(e) {
      this.xzkh_lxdh = e.target.value;
    },
    // 任务人选项触发
    handleRwrChange(value) {
      console.log(value);
      this.rwr_val = value;
    },
    // 销售内勤选项触发
    handleXsnqChange(value) {
      console.log(value);
      this.xsnq_val = value;
    },
    // 行业选项触发
    handleHyChange(value) {
      console.log(value);
      this.hyfl_val = value;
    },
    // 地址输入触发
    onKhdzChange(e) {
      console.log(e.target.value);
      this.khdz = e.target.value;
    },
    // 客户名称添加
    onXzdwmcChange(e) {
      this.dwmc = e.target.value;
    },
    // 客户电话添加
    onXzlxdhChange(e) {
      this.xzkh_lxdh = e.target.value;
    },
    // 姓名添加
    onXzxmChange(e) {
      this.xzlxr_xm = e.target.value;
    },
    // 手机号添加
    onXzphoneChange(e) {
      this.xzlxr_phone = e.target.value;
    },
    // 电话添加
    onlxrlxdhChange(e) {
      this.lxrlxdh = e.target.value;
    },
    // // 邮箱输入触发
    // onKhemailChange(e){
    //     console.log(e.target.value)
    //     this.khemail=e.target.value;
    // },
    //  // 传真输入触发
    // onKhchuanzhenChange(e){
    //     console.log(e.target.value)
    //     this.khchuanzhen=e.target.value;
    // },
    //  // 邮编输入触发
    // onKhyoubianChange(e){
    //     console.log(e.target.value)
    //     this.khyoubian=e.target.value;
    // },
    //  // 备注输入触发
    // onKhremarkChange(e){
    //     console.log(e.target.value)
    //     this.khremark=e.target.value;
    // },
    //  // 企业简介输入触发
    // onKhjianjieChange(e){
    //     console.log(e.target.value)
    //     this.khjianjie=e.target.value;
    // },
    // 地区选项触发
    handleDqflChange(value) {
      console.log(value);
      // this.dqfl_val=value;
    },
    // 地区搜索
    onDqflSearch(e) {
      console.log(e);
      this.dqfl_val = e;
    },
    // 获取任务人
    getRwr() {
      this.axios
        .post(
          "https://yb.bearing.cn/wxapi/smt_newKhTaskManList.php",
          qs.stringify({
            gsbm: this.gsbm,
            token:sessionStorage.getItem('smt_token'),
          })
        )
        .then(res => {
          console.log(res);
          // 任务人数组赋值
          if (res.data.code == 103) {
            for (var i = 0; i < res.data.result.length; i++) {
              this.rwr.push(res.data.result[i].name);
            }
          }
        });
    },
    // 获取销售内勤
    getXsnq() {
      this.axios
        .post(
          "https://yb.bearing.cn/wxapi/smt_newKhTaskManList.php",
          qs.stringify({
            gsbm: this.gsbm,
            token:sessionStorage.getItem('smt_token'),
          })
        )
        .then(res => {
          console.log(res);
          // 任务人数组赋值
          if (res.data.code == 103) {
            // this.rwr=res.data.result;
            for (var i = 0; i < res.data.result.length; i++) {
              this.xsnq.push(res.data.result[i].name);
            }
          }
        });
    },
    // 获取地区
    getDqfl() {
      this.axios
        .post(
          "https://yb.bearing.cn/wxapi/smt_newKhSort.php",
          qs.stringify({
            gsbm: this.gsbm,
            token:sessionStorage.getItem('smt_token'),
            sortType: 1
          })
        )
        .then(res => {
          console.log(res);
          // 任务人数组赋值
          if (res.data.code == 103) {
            let dqflsj = [];
            for (var i = 0; i < res.data.result.length; i++) {
              dqflsj.push(res.data.result[i].MC);
            }
            this.dqfl = new Set(dqflsj);
            this.dqfl = Array.from(this.dqfl);
            this.kfmcdqflData = this.dqfl.filter(function(s) {
              return s && s.trim();
            });
          }
        });
    },
    // 获取行业
    getHyfl() {
      this.axios
        .post(
          "https://yb.bearing.cn/wxapi/smt_newKhSort.php",
          qs.stringify({
            gsbm: this.gsbm,
            token:sessionStorage.getItem('smt_token'),
            sortType: 2
          })
        )
        .then(res => {
          console.log(res);
          // 任务人数组赋值
          if (res.data.code == 103) {
            // this.rwr=res.data.result;
            for (var i = 0; i < res.data.result.length; i++) {
              this.hyfl.push(res.data.result[i].MC);
            }
          }
        });
    },
    // // 获取客户资料
    // getKhzl(){
    //     this.axios
    //     .post(
    //         "https://yb.bearing.cn/wxapi/smt_newkhDate.php",
    //         qs.stringify({
    //             id_num:this.ID_NUM,
    //             database:this.database,
    //             IP:this.ip
    //         })
    //     ).then(res=>{
    //         if(res.data.code==103){
    //             console.log(res);
    //             let khzl=res.data.result;
    //             this.xgkh_lxdh=khzl.LXDH
    //             this.rwr_val=khzl.rwr
    //             this.xsnq_val=khzl.RWRZhuli
    //             this.dqfl_val=khzl.dqbm
    //             this.hyfl_val=khzl.HYBM
    //             this.khdz=khzl.FHDZ
    //             this.khemail=khzl.EMAIL
    //             this.khchuanzhen=khzl.cz
    //             this.khemakhyoubianil=khzl.yb
    //             this.khremark=khzl.bz
    //             this.khjianjie=khzl.gsjianjie
    //         }
    //     })
    // },
    // 取消新增客户资料
    Quxiao(){
      this.xzkh_lxdh='';
      this.dwmc='';
      this.xzlxr_phone='';
      this.rwr_val='';
      this.xsnq_val='';
      this.dqfl_val='';
      this.hyfl_val='';
      this.khdz='';
      this.xzlxr_xm=''
      this.lxrlxdh=''

    },
    // 保存新增客户资料
    Savexzkhzlxg() {
      if (
        this.xzkh_lxdh != "" &&
        this.xzkh_lxdh != undefined &&
        this.dwmc != "" &&
        this.dwmc != undefined
      ) {
        this.axios
          .post(
            "https://yb.bearing.cn/wxapi/smt_newkhAdd.php",
            qs.stringify({
              dwmc: this.dwmc,
              gsbm: this.gsbm,
              khlxdh: this.xzkh_lxdh,
              lxrphone: this.xzlxr_phone,
              lxrlxdh: this.lxrlxdh,
              lxr: this.xzlxr_xm,
              rwr: this.rwr_val,
              rwrzhuli: this.xsnq_val,
              dqbm: this.dqfl_val,
              hybm: this.hyfl_val,
              fhdz: this.khdz,
              database: this.database,
              IP: this.ip
            })
          )
          .then(res => {
            if (res.data.code == 103) {
              this.$message.success("新增成功");
              this.$store.state.shdz = false;
              this.$parent.getsamtloginNew();
            } else {
              this.$message.error(res.data.msg);
            }
          });
      } else {
        this.$message.error("客户名称或手机号不能为空");
      }
    }
  },
  created() {
    this.gsbm = sessionStorage.getItem("gsbm");
    this.genjinInfo = JSON.parse(sessionStorage.getItem("genjinInfo"));
    // console.log( this.genjinInfo);
    // this.dwmc=this.genjinInfo.DWMC;
    // this.ID_NUM=this.genjinInfo.ID_NUM;
    this.getRwr();
    this.getXsnq();
    this.getDqfl();
    this.getHyfl();
    // this.getKhzl();
  }
};
</script>

<style lang='less'  >
.xzkh_tk {
  // position: absolute;
  // z-index: 9999;
  // width: 45%;
  // height: auto;
  // background-color: #fff;
  // text-align: center;
  // padding: 20px;
  // top: 0px;
  // left: 50%;
  // transform: translateX(-50%);

  .bjtk_list {
    .ant-tabs-bar{
      margin-bottom: -12px;
      padding-top: 10px;
      padding-left: 20px;
    }
    .cz_title{
      display: block;
      width: 13%;
      color: #1890ff;
      height: 18px;
      text-align: center;
    }
    .cz_title_border{
      display: inline-block;
      width: 13%;
      height: 2px;
      background-color: #1890ff;
    }
    .head{
      padding-left: 20px;
      height: 40px;
      background-color: #f6f6f6;
      line-height: 40px;
    }
     .list {
        width: 45%;
        display: inline-block;
        line-height: 56px;
        // display: flex;
        // justify-content: space-around;
        h2 {
          text-align: center;
          display: block;
          width: 100%;
        }
        .inp_tit {
          width: 22%;
          display: inline-block;
          text-align: right;
          margin-right: 10px;
        }
        .gjxq_area{
          width: 75%;
        }
        .cz_btn {
          display: block;
          width: 25%;
        }
        .tit {
          display: inline-block;
          width: 80px;
          text-align: right;

          i {
            color: #ff0000;
            padding: 0 4px;
          }
        }

        .radio {
          margin-left: 10px;
        }

        .text {
          width: 288px;
          vertical-align: top;
        }
      }
    .list_btn {
        text-align: center;
        display: flex;
        position: absolute;
        right: 62px;
        bottom: 40px;
        button {
          width: 130px;
          height: 40px;
        }
        .button{
          background-color: #fff;
          color: #666;
          margin-right: 30px;
          width: 130px;
          height: 40px;
          border: 1px solid #ccc;
        }
      }
  }
}
</style>
